<?php
$parentCaption = 'Loyalty Program';
$caption = 'Rewards';
$this->pageTitle = $caption;

$this->breadcrumbs = array(
	$parentCaption => array('index'),
	$caption,
);

?>
<div class="page-header position-relative">
	<h1>
		<?php echo $parentCaption; ?>
		<small>
			<i class="icon-double-angle-right"></i>
			<?php echo $caption; ?>
		</small>
	</h1>
</div><!--/.page-header-->

<div class="row-fluid">
	<!-- Message -->
	<div class="alert alert-block alert-info">
		<button type="button" class="close" data-dismiss="alert">
			<i class="icon-remove"></i>
		</button>
		<i class="icon-info-sign"></i>
		Customize your loyalty program to reinforces your brand personality, keep them more fun and motivating to customers.
	</div>
	
	<div class="space-6"></div>
	
	<div class="row-fluid">
		<div class="span8">
			<div class="widget-box transparent">
				<div class="widget-header">
					<h3 class="lighter green"><i class="icon-trophy"></i> Loyalty Program</h3>
					<div class="clearfix"></div>
				</div>
				<div class="widget-body">
					<div class="widget-body-inner">
						<div class="widget-main">
							<div class="row-fluid" id="rwd-100">
								<form action="<?php echo Yii::app()->baseUrl; ?>/program/add" method="post" class="program-form">
									<div class="span2">
										<input name="points" type="text" class="points span12" placeholder="?" data-rel="tooltip" title="Enter the required points" />
									</div>
									<div class="span8">
										<input name="title" type="text" class="span12" placeholder="Input the title here. e.g. Get one coffee free" />
										<input name="desc" type="text" class="span12" placeholder="You may give a description for your program..." />
									</div>
									<div class="span2">
										<button onclick="return false;" class="btn btn-warning btn-small" id="program-add">
											<i id="program-add-loader" class="icon-refresh icon-spin" style="display:none;"></i>
											<i id="program-add-plus" class="icon-plus bigger-110"></i>
											Add
										</button>
									</div>
									<div class="row-fluid">
										<div class="span12 errorMessage" id="program-add-error"></div>
									</div>
								</form>
							</div>
							<div id="program-add-list">
								<div class="text-center">
									<img id="program-add-list-loader" style="display:none;" src="<?php echo Yii::app()->baseUrl; ?>/img/ajax-loaders/ajax-loader-4.gif" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="span4">
			<div class="widget-box transparent">
				<div class="widget-header">
					<h3 class="lighter blue"><i class="icon-book"></i> Learning</h3>
				</div>
				<div class="widget-body">
					<div class="widget-body-inner">
						<div class="widget-main">
							<div class="accordion-style2 accordion" id="faq-list-1">
								<div class="accordion-group">
									<div class="accordion-heading">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#faq-list-1" href="#faq-1-1">
											Example for Popular Loyalty Programs
										</a>
									</div>
									<div id="faq-1-1" class="accordion-body collapse in">
										<div class="accordion-inner">
											<ul class="icons-ul">
												<li><i class="icon-li icon-caret-right"></i> 10 points: Free tea or coffee</li>
												<li><i class="icon-li icon-caret-right"></i> 25 points: €5 off a Pastry or dessert</li>
												<li><i class="icon-li icon-caret-right"></i> 100 points: 50% off the Lunch Special</li>
												<li><i class="icon-li icon-caret-right"></i> 400 points: Free Bottle of House Wine</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(function() {
	//tooltips
	$('[data-rel="tooltip"]').tooltip({container:'body'});
	
	//load program list
	$.ajax({
		'type':'POST', 'url':'<?php echo Yii::app()->createUrl('/program/index'); ?>', 'dataType':'html',
		'beforeSend':function(){$('#program-add-list-loader').show();},
		'success':function(data){
			$('#program-add-list-loader').show();
			$('#program-add-list').html(data);
		}
	});
	
	//add program
	$('#program-add').click(function() {
		var _form = jQuery(this).parent().parents('form');
		$.ajax({
			'type':'POST', 'url':_form.attr('action'), 'cache':false,
			'dataType':'html', 'data':_form.serialize(),
			'beforeSend':function(){beforeSubmit("#program-add");},
			'error':function(resp){errorSubmit(resp, "#program-add");},
			'success':function(data){afterSubmit(data, "#program-add");}
		});
	});
	$('#program-add').parent().parent().find('input').focus(function(){
		$(this).removeClass('error');
	}).change(function(){
		$('#program-add-error').html('');
	});
	
	//allow number input
	$('input[name="points"]').keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
});

function beforeSubmit(eId) {
	$(eId + '-error').html('');
	$(eId).attr('disabled', true); $(eId + '-plus').hide(); $(eId + '-loader').show();
}
function errorSubmit(resp, eId) {
	$(eId).attr('disabled', false); $(eId + '-loader').hide(); $(eId + '-plus').show();
	var json = JSON.parse(resp.responseText);
	$('input[name="'+json.name+'"]').addClass('error');
	$(eId + '-error').html(json.message);
}
function afterSubmit(data, eId) {
	$(eId).attr('disabled', false); $(eId + '-loader').hide(); $(eId + '-plus').show();
	$(eId + '-list').prepend(data).animate({background:"none"}, 1000);
	$(eId + '-button').parent().find('input[type="text"]').val('');//clear old value
}

function eventPublish(e) {
	var _url = '<?php echo Yii::app()->createUrl('/program/publish'); ?>?id=' + $(e).data('id');
	$.ajax({
		'type':'GET', 'url':_url,
		'beforeSend':function(){ $(e).attr('disabled', false); },
		'error':function(resp){ $(e).attr('disabled', true); },
		'success':function(data){ $(e).hide().parent().find('.icon-ok-circle').fadeIn(); }
	});
}
function eventTrash(e) {
	var _url = '<?php echo Yii::app()->createUrl('/program/trash'); ?>?id=' + $(e).data('id');
	$.ajax({
		'type':'GET', 'url':_url,
		'beforeSend':function(){ $('#program-'+$(e).data('id')).fadeOut(); }
	});
}
</script>